<template>
	<div class="mine">
	    <div class="loginUser" @click='goLoginUser'></div>
		<div class="header">
			<div class="headerLogo">
				<img src="../../assets/image/mine/default.png" class="headerPhoto" v-if='!loginFlag' alt="" @click="goPersonalInfo" />
				<img :src="userData.AVATAR" class="headerPhoto" v-if='loginFlag&&userData.AVATAR' alt="" @click="goPersonalInfo" />
				<img src="../../assets/image/mine/default.png" class="headerPhoto" v-if='loginFlag&&!userData.AVATAR' alt="" @click="goPersonalInfo" />
				<img src="../../assets/image/mine/edit.png" class="edit" v-if='loginFlag' alt="" @click="goPersonalInfo" />
			</div>
			<div class="userMess">
				<div class="login" v-if='loginFlag'>
					<h1 class="userName">{{userData.USERNAME}}</h1>
					<div>
						<!--<img src="../../assets/image/mine/vip2.png" alt="" @click="goMacaroni" />-->
						<img v-if="levelData.MEMBERGRADE==1" src="../../assets/image/macaroni/lvDiamond1.png" alt="" @click="goMacaroni"/>
		    			<img v-else-if="levelData.MEMBERGRADE==2" src="../../assets/image/macaroni/lvGold1.png" alt="" @click="goMacaroni"/>
		    			<img v-else-if="levelData.MEMBERGRADE==3" src="../../assets/image/macaroni/lvSilver1.png" alt="" @click="goMacaroni"/>		    			
		    			<img v-else-if="levelData.MEMBERGRADE==5" src="../../assets/image/macaroni/lvRegister.png" alt="" @click="goMacaroni"/>
		    			<!--<img v-if="levelData.MEMBERGRADE==4" src="../../assets/image/mine/vip2.png" alt="" @click="goMacaroni"/>-->
		    			<img v-else src="../../assets/image/macaroni/lvCopper1.png" alt="" @click="goMacaroni"/>
						<img src="../../assets/image/mine/qd3.png" alt="" @click="signInAlert" />
					</div>
				</div>
				<div class="noLogin" v-if='!loginFlag' @click="goLogin">请登录</div>
			</div>
			<div class="setting" @click="goSetting">
				<img src="../../assets/image/mine/setting.png" alt="" />
			</div>
		</div>
		<div class="allFun">
			<div class="orderType">
				<div class="allOrder border-bottom" @click='goOrder(0)'>
					<h1>我的订单</h1><span>全部订单&nbsp;<img src="../../assets/image/mine/right.png" alt="" /></span>
				</div>
				<div class="orderClass">
					<div class="itemClass" @click='goOrder(2)'>
						<img src="../../assets/image/mine/order2.png" alt="" />
						<badge v-if="num2>0" :text='num2'></badge>
						<p>待付款</p>
					</div>
					<div class="itemClass" @click='goOrder(1)'>
						<div>
							<img src="../../assets/image/mine/order1.png" alt="" />
							<badge v-if="num1>0" :text='num1'></badge>
						</div>
						<p>待服务</p>
					</div>
					<div class="itemClass" @click='goOrder(3)'>
						<img src="../../assets/image/mine/order3.png" alt="" />
						<badge v-if="num3>0" :text='num3'></badge>
						<p>待评价</p>
					</div>
					<div class="itemClass" @click='goOrder(4)'>
						<img src="../../assets/image/mine/order4.png" alt="" />
						<badge v-if="num4>0" :text='" "+num4'></badge>
						<p>已完成</p>
					</div>
				</div>
			</div>
			<div class="allItem">
				<div class="itemTop">
					<div class="item border-bottom" @click="goMsgCenter">
						<img src="../../assets/image/mine/fun1.png" alt="" />
						<badge v-if="num5>0" :text='num5'></badge>
						<p>消息中心</p>
					</div>
					<div class="item border-bottom" @click='goCar'>
						<img src="../../assets/image/mine/fun2.png" alt="" />
						<p>我的车辆</p>
					</div>
					<div class="item border-bottom" @click="goTicket">
						<img src="../../assets/image/mine/fun3.png" alt="" />
						<badge v-if="num6>0" :text='num6'></badge>
						<p>我的券包</p>
					</div>
					<div class="item years border-bottom" @click='goMaintainCard'>
						<img src="../../assets/image/mine/fun4.png" alt="" />
						<badge v-show="show8" text='¥399'></badge>
						<p>保养年卡</p>
					</div>
				</div>
				<div class="itemCenter">
					<div class="item border-bottom" @click="goCollect">
						<img src="../../assets/image/mine/fun5.png" alt="" />
						<p>我的收藏</p>
					</div>
                    <div class="item border-bottom" @click='goAddress'>
                        <img src="../../assets/image/mine/fun8.png">
                        <p>收货地址</p>
                    </div>
					<!-- <div class="item border-bottom" @click="goInvite">
						<img src="../../assets/image/mine/fun7.png" alt="" />
						<p>邀请有奖</p>
					</div> -->
					<div class="item border-bottom" @click="goGroupVoucher">
						<img src="../../assets/image/mine/fun9.png" alt="" />
						<p>我的免单券</p>
					</div>
					<div class="item border-bottom" @click="goShoppingCart">
                        <img src="../../assets/image/mine/fun6.png" alt="" />
                        <badge v-if="num7>0" :text='num7'></badge>
                        <p>我的购物车</p>
                    </div>
				</div>
                <div class="itemBottom">
                    <div class="item border-bottom" @click="goComment">
                        <img src="../../assets/image/mine/fun10.png" alt="" />
                        <p>我的评价</p>
                    </div>
                    <div class="item border-bottom" @click="gocustomerService">
                        <img src="../../assets/image/mine/helpserver.png" alt="" />
                        <p>客服与帮助</p>
                    </div>
                    <div class="item border-bottom" @click="goQuestion">
                        <img src="../../assets/image/question/question.png" alt="" />
                        <p>我的问答</p>
                    </div>
                    <div class="item border-bottom" >
                      
                    </div>
                </div>
				<div class="itemBottomBlank"></div>
			</div>
			<div class="carPro" v-show="youLikeData.length!=0" v-if='youLikeData'>
				<h1>
                <img src="../../assets/image/mine/like2.png" alt="" />
              </h1>
				<div class="allProduct">
					<div class="listItem productBorder" v-for='(item,index) in youLikeData' :key="index" @click='goDetail(item.SERV_ID)'>
						<img :src="item.COVER_IMG" alt="" />
						<p>{{item.REMARK}}</p>
						<h2>{{item.SERV_SUBJECT}}</h2>
						<div class="price">
							<span>￥{{item.PRICE}}</span>
							<img src="../../assets/image/home/shopCar.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<div class="youLikeBlank" v-show="youLikeData.length!=0"></div>
		</div>
		<!--签到弹窗-->
		<popup v-model="popupVisible" height="100%">
			<div class="popupImg">
				<div class="popupImgSignin">
					<img src="../../assets/image/macaroni/tongAlert.png" alt="" />
				</div>
				<div class="popupImgClose" @click="noShowAlert">
					<img src="../../assets/image/close.png" alt="" />
				</div>
			</div>
		</popup>
		<!--确认框-->
		<confirm v-model="confirmVisible" title="提示" @on-confirm="goLogin">
			<p style="text-align:center;">您当前尚未登录，现在前往登录？</p>
		</confirm>
	</div>
</template>

<script>
    // 我的模块
    import { Badge, Popup, Alert, Confirm } from 'vux';
    import { getCookie, setCookie } from '../../util/commonUtils'
    export default {
            name: "mine",
            // 数据
            data() {
                return {
                    loginFlag: false, //是否登录
                    headLogo: '', //头像
                    userId: '', //用户id
                    youLikeData: '', //猜您喜欢数据
                    userData: '', //用户数据
                    signCode: '', //签到状态码1-正常返回 2-该用户当天已签到，无需二次签到
                    popupVisible: false, //弹窗是否可见
                    confirmVisible: false, //确认是否可见，提示去登陆
                    num1: 0, //待服务数量
                    num2: 0, //待付款数量
                    num3: 0, //待评价数量
                    num4: 0, //已完成数量
                    num5: 0, //消息中心数量
                    num6: 0, //我的券包数量
                    num7: 0, //购物车数量  
                    show8:false,    
                    levelData: '', //级别
                }
            },
            components: {
                Badge,
                Popup,
                Alert,
                Confirm
            },
            // 计算属性
            computed: {},
            // 创建（实例创建完成）
            created() {
                this.userId = getCookie('loginkey');
                //this.userId = 169623;
                if (this.userId) {
                    this.loginFlag = true;
                    this.show8 = true;
                } else {
                    return false;
                }
                //setCookie('loginkey','205818');//江政彬id
                // setCookie('userName','13827329584');//江政彬id
                // setCookie('loginkey','229012');//少丽id
                // setCookie('loginkey','137038');//继定id
                //个人信息
                this.$fetchGet('/UserWeb/getUserInfo.action', {
                    USER_ID: this.userId
                }).then(res => {
                    //console.dir(res);
                    if (res.STATUS_CODE == 1) {
                        this.userData = res;
                        setCookie('TEL',res.TEL)
                    }
                }, err => console.log(err));
                //会员签到
                this.$fetchGet('/MemberIntegralWeb/memberSign', {
                    USER_ID: this.userId
                }).then(res => {
                    this.signCode = res.STATUS_CODE;
                }, err => console.log(err));
                //获取会员经验值、等级、通币
                this.$fetchPost('/ExperienceValueWeb/getMemberInfoByUserId', {USER_ID: this.userId}).then(res => {
                    if (res.STATUS_CODE == 1) {
                        this.levelData = res;
                    }
                }, err => console.log(err));
                //用户的订单统计和未使用的券包
                this.$fetchGet('/ServOrderWeb/getUserOrderStatus', {
                    USER_ID: this.userId
                }).then(res => {
                    this.num1 = res.WAIT_SERV;
                    this.num2 = res.WAIT_PAY;
                    this.num3 = res.WAIT_EVALUATE;
                    this.num4 = res.ORDER_FINISH;
                    this.num6 = res.CASH_VOL_NUM;

                }, err => console.log(err));
                //消息总数
                this.$fetchGet('/CNotificationWeb/newPageAllNotificationNum.action', {
                    USER_ID: this.userId
                }).then(res => {
                    if (res.STATUS_CODE == 1) {
                        this.num5 = res.COUNT;
                    }
                }, err => console.log(err));
                //购物车列表
                this.$fetchGet('/ShoppingCartWeb/getShopCart', {
                    USER_ID: this.userId
                }).then(res => {
                    if (res.STATUS_CODE == 1) {
                        this.num7 = res.SHOPPING_CART;
                    }
                }, err => console.log(err));
                //猜您喜欢
                this.$fetchGet('/BrowHobbyWebAction/getbrowseHobby', {
                    USER_ID: this.userId,
                    pageNo: 1
                }).then(res => {
                    if (res.STATUS_CODE == 1) {
                        this.youLikeData = res.RESULT_DATA.slice(0, 6);
                    }
                }, err => console.log(err));
            },
            // el被创建，并挂载到实例上
            mounted() {
    },
    // 方法（实例中的方法）-----------
    methods: {
        goLoginUser(){
            if(sessionStorage.getItem('loginUsers')==4){
                sessionStorage.removeItem('loginUsers');
                this.$router.push('/loginUser');
            }else{
                let num=Number(sessionStorage.getItem('loginUsers'));
                num++;
                sessionStorage.setItem('loginUsers',num);
            }
        },
        //登录
        goLogin() {
            this.$router.push('/login');
        },
        //购物车
        goShoppingCart() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/shoppingCart');
        },
        //我的券包
        goTicket() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/ticket');
        },
        //消息中心
        goMsgCenter() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/msgCenter');
        },
        //我的收藏
        goCollect() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/collect');
        },
        //个人信息
        goPersonalInfo() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/personalInfo');
        },
        //通心粉
        goMacaroni() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/macaroni');
        },
        //签到弹窗
        signInAlert() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            if(this.signCode == 2) {
                this.$vux.alert.show({
                    title: '提示',
                    content: '亲,今天已签到,明天再来吧!'
                });
                return;
            }
            this.popupVisible = true;
        },
        //关闭弹窗
        noShowAlert() {
            this.popupVisible = false;
        },
        //设置
        goSetting() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/setting');
        },
        //订单列表
        goOrder(id) {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/order/' + id);
            /*if(this.userId){
                this.$router.push('/order/'+id);
            }else{
                this.$vux.confirm.show({
                title:'提示',
                content:'请先登录',
                onConfirm () {
                    that.$router.push('/login');
                }
                })
            }*/
        },
        //保养年卡
        goMaintainCard() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/yearCard');
        },
        //我的车辆
        goCar() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/allCar');
        },
        //去收货地址模块
        goAddress() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/address');
        },
        //邀请有奖
        goInvite() {
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/invitation');
        },
        goGroupVoucher(){
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/groupVoucher');
        },
        goComment(){
            if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
            this.$router.push('/myComment');
        },
        gocustomerService(){
            this.$router.push('/customerService')
        },
        //车品详情
        goDetail(id) {
            this.$router.push('/shopDetail/' + id);
        },
          //去我的问答
        goQuestion(){
        	 if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
          this.$router.push('/question');
        },
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    //1px的边框引入
    @import url('../../assets/css/public.less');
    .vux-badge-single {
        padding: 0;
        width: 16px;
    }

    .vux-badge {
        width:0.34rem;
        height:0.34rem;		
        text-align: center;
        background: #f63b3b;
        color: #fff;
        font-size: 0.21rem;		
        border-radius: 50%;
        line-height:0.34rem;
        padding: 0 0.06rem;
        background-clip: padding-box;
        vertical-align: middle;
        position: absolute;
        top: 0rem;
        right: 0.3rem;
    }	
    .loginUser{
        position: absolute;
        top: 0;
        left: 40%;
        width: 2.6rem;
        height: 0.7rem;
    }
    .mine {
        width: 7.5rem;        
        .header {
            height: 3rem;
            background: red;
            display: flex;
            background: url(../../assets/image/mine/headerBg.png) no-repeat;
            background-size: 7.5rem 3rem;
            justify-content: space-around;
            .headerLogo {
                width: 30%;
                padding: 0.7rem 0.1rem;
                .headerPhoto {										
                    border-radius: 100%;
                    margin-right: -0.18rem;
                }
                img {
                    width: 1.3rem;
                    height: 1.3rem;
                }
                .edit {
                    width: 0.25rem;
                    height: 0.25rem;
                    margin-left: -0.1rem;
                    margin-bottom: 0.1rem;					
                }
            }
            .userMess {
                width: 58%;
                padding: 0.9rem 0 0.5rem;
                text-align: left;
                h1 {
                    font-size: 0.32rem;
                    color: #fff;
                    margin-bottom: 0.2rem;
                }
                div {
                    height: 0.8rem;
                    img {
                        display: block;
                        width: 1.5rem;
                        margin-right: 0.3rem;
                        float: left;
                        height: 0.46rem;
                    }
                    img:last-child{
                        width:1.32rem;
                        height:0.46rem;
                    }
                }
                .noLogin {
                    font-size: 0.3rem;
                    color: #fff;
                    font-weight: bold;
                    padding: 0.3rem 0;
                }
            }
            .setting {
                width: 12%;
                position: relative;
                display: flex;
                justify-content: center;				
                img {
                    align-self: center;
                    position: absolute;
                    top: 0.4rem;
                    right:0.3rem;
                    width: 0.5rem;
                    height: 0.5rem;
                }
            }
        }
        .allFun {
            .carPro {
                background: #fff;
                margin-bottom: 0.16rem;
                h1 {
                    height: 0.8rem;
                    line-height: 0.8rem;
                    display: flex;
                    align-items: center;
                    justify-content:center;
                    padding-left: 0.2rem;
                    img {
                        align-self: center;
                        width: 2rem;
                        height: 0.29rem;
                    }
                }
                .allProduct {
                    display: flex;
                    justify-between: space-around;
                    flex-wrap: wrap;
                    .listItem {
                        padding: 0rem 0 0.05rem 0;
                        margin: 0 0.1rem 0.1rem 0.175rem;
                        box-sizing: border-box;
                        img {
                            width: 3.5rem;
                            height: 3rem;
                            background: #f7f7f7;
                            display: block;
                        }
                        h2 {
                            width: 3.5rem;
                            margin-top: 0.2rem;
                            font-size: 0.26rem;
                            line-height: 0.4rem;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            color: #222;
                        }
                        p {
                            font-size: 0.22rem;
                            z-index: 2;
                            height: 0.5rem;
                            line-height: 0.5rem;
                            position: relative;
                            width: 3.46rem;
                            margin: 0 auto;
                            background: #f7f7f7;
                            color: #EC2121;
                        }
                        .price {
                            width: 3.5rem;
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-end;
                            padding: 0.15rem 0.2rem 0.05rem 0.2rem;
                            img {
                                width: 0.4rem;
                                height: 0.35rem;
                                background: #fff;
                            }
                            span {
                                font-size: 0.25rem;
                                color: #e84632;
                                padding-right: 0.15rem;
                                font-weight: bolder;
                            }
                        }
                    }
                    .listItem:nth-child(2n) {
                        padding: 0rem 0rem 0.1rem 0;
                        margin: 0 0.175rem 0.1rem 0;
                    }
                }
            }
            .youLikeBlank{
                height:1rem;
                background:#fff;
            }
            /*边框一像素*/
            .productBorder{
                position:relative;
            }
            .productBorder::after {
                content: "";
                box-sizing: border-box;
                position: absolute;
                left: 0;
                top: 0;
                width: 200%;
                height: 200%;
                transform:scale(0.5,0.5);
                transform-origin:0 0;
                border: 1px solid #e1e2df;
            }
            .orderType {
                height: 2.4rem;
                background: #fff;
                border-bottom: 0.1rem solid #ededed;
                .allOrder {
                    display: flex;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    justify-content: space-between;
                    padding: 0 0.2rem;
                    h1 {
                        font-size: 0.3rem;
                        color: #040404;
                    }
                    span {
                        font-size: 0.25rem;
                        vertical-align: middle;
                        color: #999;
                        img {
                            width: 0.1rem;
                            height: 0.19rem;
                        }
                    }
                }
                .orderClass {
                    display: flex;
                    height: 1.5rem;
                    padding: 0.2rem 0;
                    justify-content: space-between;
                    .itemClass {
                        text-align: center;
                        width: 25%;
                        position: relative;
                        img {
                            width: 0.44rem;
                            height: 0.44rem;
                            display: block;
                            margin: 0.1rem auto;
                        }
                        p {
                            font-size: 0.25rem;
                            padding-top: 0.1rem;
                            color: #333;
                        }
                    }
                }
            }
            .allItem {
                background: #fff;			
                .itemBottomBlank {
                    width: 7.5rem;
                    height: 0.1rem;
                    background:#ededed;					
                }
                .itemTop,
                .itemBottom,.itemCenter {
                    display: flex;
                    height: 2rem;
                    text-align: center;
                    justify-content: flex-start;
                }
                .item {
                    border-right: 1px solid #efeff4;
                    .borderBFu(#efeff4);
                    width: 25%;
                    position: relative;
                    img {
                        width: 0.5rem;
                        height: 0.5rem;
                    }
                    .vux-badge {
                        top: 0.4rem;
                        left: 1.05rem;
                    }
                }
                .years {
                    .vux-badge {
                        top: 0.1rem;
                        left: 0.8rem;
                        padding: 0 6px;
                        margin-left: 0.05rem;
                        width:0.74rem;
                        height:0.34rem;
                        line-height:0.34rem;
                        border-radius:0.2rem;
                    }
                }
                .item p {
                    font-size: 0.22rem;
                    color: #333;
                }
                .item:last-child {
                    border-right: 0;
                }
                .item:first-child{
                    border-right: 1px solid #efeff4;
                }
            }
            .youLike {
                background: #ffffff;
                margin-bottom: 1.1rem;
                .youLikeTitle {
                    display: flex;
                    justify-content: center;
                    img {
                        align-self: center;
                        width: 7.2rem;
                        height: 0.6rem;
                    }
                }
                .youLikeAll {
                    width: 100%;
                    background: #ffffff;
                    display: flex;
                    flex-flow: row wrap;
                    align-items: center;
                    justify-content: space-between;
                    background: #efeff4;
                    .youlikeList {
                        width: 49.5%;
                        display: flex;
                        flex-flow: column;
                        align-items: center;
                        position: relative;
                        border: 0.01rem solid #eeeeee;
                        margin-top: 0.08rem;
                        background: #fff;
                        img:first-child {                            
                            width: 100%;
                            height: 3.35rem;
                            margin-bottom: 0.2rem;                            
                            border-radius: 0.15rem;
                        }
                        img:last-child {
                            position: absolute;
                            right: 0.2rem;
                            bottom: 0.2rem;
                            width: 0.4rem;
                            height: 0.35rem;
                        }
                        h2 {
                            width: 3.55rem;
                            height: 0.32rem;
                            font-size: 0.18rem;
                            text-align: center;
                            color: #EC2121;
                            margin-top: -0.5rem;
                            letter-spacing: 0.02rem;
                            font-weight: bold;
                        }
                        h3 {
                            width: 3.35rem;
                            height: 0.8rem;
                            font-size: 0.18rem;
                            color: #000000;
                            text-align: center;
                            letter-spacing: 0.02rem;
                            font-weight: bold;
                            /*让文字只显示2行，其余用...代替start*/
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            /*让文字只显示2行，其余用...代替end*/
                        }
                        p {
                            width: 3.35rem;
                            font-size: 0.18rem;
                            color: #EC2121;
                            text-align: left;
                            margin-bottom: 0.2rem;
                            letter-spacing: 0.01rem;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        .popupImg {
            width: 7.5rem;
            height: 13.34rem;
            background: #EDE9E9;
            display: flex;
            flex-flow: column;
            justify-content: center;
            z-index: 99999;
            .popupImgSignin {
                img {
                    align-self: center;
                    width: 6.3rem;
                    height: 5.8rem;
                }
            }
            .popupImgClose {
                img {
                    align-self: center;
                    width: 0.54rem;
                    height: 0.54rem;
                }
            }
        }
    }
</style>